body{
    font-family: Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Hiragino Sans GB W3,WenQuanYi Micro Hei,sans-serif;
    background-image: linear-gradient(to right, #170a38, #4a2241);
}
a{
    text-decoration: none;
    color: #9d9d9d;
}
a:hover{
    color: #fff;
}
/*外部容器*/
.box{
    background-color:#222; 
}
.header{
    max-width: 1140px;
    height: 50px;
    margin: 0 auto;
    background-color: #222;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*设置右侧的导航图标*/
.header-right{
    .nav{
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:#222;
        border-top: 1px solid #393939;
        li{
            width: 80%;
            padding: 10px 15px;
            a{
                line-height: 40px;
                font-size: 14px;
            }
        }
    }
    .right-menu{
      width: 44px;
      height: 34px;
      position: relative;
      border: 1px solid #333333;
      margin: 8px 0;
       /*.right-menu:hover{
           background-color:#333 ;
        }*/
        li{
          width: 22px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          margin:0px 12px;
          transform-origin: left center;
          transition: 0.5s;
        }
        li:nth-child(1){
              top: 11px;
        }
        li:nth-child(2){
             top: 17px;
        }
        li:nth-child(3){
             top: 23px;
        }
        &:active{ 
            li:nth-child(1){
                transform:rotateZ(35deg);
            }
            li:nth-child(2){
                opacity: 0;
            }
            li:nth-child(3){
                transform: rotateZ(-35deg);
            }
        }
    }
    .right-menu:active + .nav{
        display: block;
    }

}
@media only screen{
    @media (min-width: 768px){
       .header-left{
          order: 1;
        }
        .header-right{
            order: 2;
            flex-grow: 1;
            .nav{
              display:flex;
              position:static;
              padding: 0;
              border-top: none;
              justify-content:space-evenly;
              &:active {
                  display: block;
              }
               li{
                  width: auto;
                  margin: 0;
                   a{
                      line-height: 1;
                    }
                }
            }
            .right-menu{
                display: none;
            }
        }
    }
}


            
                



    


          